<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .header {
            width: 100%;
            height: 200px;
            background: skyblue;
        }

        .header>nav,
        .header>nav>ul {
            width: 1200px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
        }

        .header nav>ul>li {
            float: left;
            padding: 20px 25px;
        }


        .content {
            width: 1200px;
            height: 800px;
            margin: 0 auto;
            background: orange;
        }

        .footer {
            width: 100%;
            height: 200px;
            background: hotpink;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 组件的使用 -->
        <com-header :list="menu_list" title="首页"></com-header>
        <!-- <com-header v-bind:list="menu_list" title="产品中心" :numbers="[1,2,3]"></com-header> -->

        <!-- <conn-line-list :list-data="menu_list"></conn-line-list> -->

        <com-content></com-content>
        <com-footer :foot-list="foot_data"></com-footer>
        <!-- 
        <div class="content"></div>
        <div class="footer"></div> -->
        <div ID=""></div>
        <div data-index=""></div>
    </div>


</body>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14">
</script>
<script>
    // 注册公共组件
    // 格式： Vue.component(组件名, 组件的配置)
    Vue.component('com-header', {
        props: ['list', 'title', 'numbers'],
        data: function () {
            return {
                msg: '小明好可爱',
                // title:'小明好帅'
            }
        },
        template: `
        <div class="header">
            <nav>
                <conn-line-list :list-data="list"></conn-line-list>
            </nav>
        </div>
        `
    })

    Vue.component('conn-line-list', {
        props: ['listData'],
        data: function () {
            return {

            }
        },
        template: `
        <ul>
            <li v-for="li in listData">
                <a :href="li.url">{{li.title}}</a>
            </li>
        </ul>
        `
    })

    Vue.component('com-content', {
        data: function () {
            return {

            }
        },
        template: `
        <div class="content"></div>
        `
    })

    Vue.component('com-footer', {
        props: ['footList'],
        data: function () {
            return {

            }
        },
        template: `
        <div class="footer">
            <conn-line-list :list-data="footList"></conn-line-list>    
        </div>
        `
    })


    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            imgs: [
                { title: '帅气猫', src: '1.webp' },
                { title: '蓝猫', src: '2.webp' },
            ],
            menu_list: [
                { title: '首页', url: 'index.html' },
                { title: '关于我们', url: '2.html' },
                { title: '产品列表', url: '3.html' },
                { title: '合作伙伴', url: '4.html' },
                { title: '加入我们', url: '5.html' },
                { title: '荣誉列表', url: '6.html' },
            ],
            foot_data: [
                { title: 'B站', url: 'index.html' },
                { title: 'A站', url: '2.html' },
                { title: 'C站', url: '3.html' },
                { title: '抖音', url: '4.html' },
                { title: '备案中心', url: '5.html' },
                { title: '站长之家', url: '6.html' },
            ],
            num: 123,
        },
        // 使用生命周期
        beforeCreate: function () {

        },
        mounted: function () {

        },

        // methods是当前应用定义的函数方法
        methods: {

        },
    })



</script>

</html>